<template>
	<view class="my">
		<!--头部-->
		<view class="my-header">

			<view class="header-main">
				<image src="~@/static/photo.jpg" mode="" style="position: absolute;width: 100%;height: 100%;"></image>
				<view class="header-logo" v-if="data.user">
					<image class="logo-img" :src="data.avatar" mode=""></image>
					<view class="logo-name" style="display: flex;justify-content: center;align-items: center;">{{data.user}}</view>
				</view>
				
				<view class="header-logo" v-else @click="denglu">
					<image class="logo-img" src="../../static/head.jpg" mode=""></image>
					<view class="logo-name" style="display: flex;justify-content: center;align-items: center;">登录</view>
				</view>
			</view>
		</view>
		<!--我的订单-->
		<view class="order">
			<view class="order-title">
				<view>我的订单</view>
				<view @tap="productOrder(5)">全部订单 > </view>
			</view>
			<view class="order-list">
				<!-- <view class="order-item" @tap="productOrder(0)">
					<image class="order-img" src="../../static/order1.jpg" mode=""></image>
					<view>待付款</view>
				</view> -->
				<view class="order-item" @tap="productOrder(1)">
					<image class="order-img" src="../../static/order2.jpg" mode=""></image>
					<view>待发货</view>
				</view>
				<view class="order-item" @tap="productOrder(2)">
					<image class="order-img" src="../../static/order3.jpg" mode=""></image>
					<view>待收货</view>
				</view>
				<view class="order-item" @tap="productOrder(3)">
					<image class="order-img" src="../../static/order4.jpg" mode=""></image>
					<view>待评价</view>
				</view>
				<view class="order-item" @tap="productOrder(4)">
					<image class="order-img" src="../../static/order5.png" mode=""></image>
					<view>退款管理</view>
				</view>
			</view>
		</view>
		<!--内容管理-->
		<view class="my-content">

			<view class="my-content-item" @tap='goConfig'>
				<view style="display: flex;">
					<view>设置</view>
				</view>
				<view> > </view>
			</view>

			<view class="my-content-item"  @tap='gogunayv'>
				<view style="display: flex;">
					<view>关于</view>
				</view>
				<view> > </view>
			</view>

			<view class="my-content-item" @tap='tuic'>
				<view style="display: flex;">
					<view>退出</view>
				</view>
				<view> > </view>
			</view>
		</view>
	</view>
</template>


<script  setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive, toRefs } from 'vue'
const data = reactive<{
	avatar:string | null
	user:string | null
}>({
	avatar:null,
	user:null

})
onLoad(()=>{
	newData()
})
const goConfig = () => {
	uni.navigateTo({
		url: '/pages/my-config/my-config'
	})
}
const denglu = () => {
	try {
		uni.removeStorageSync('d_token')
		uni.removeStorageSync('d_user')
		uni.removeStorageSync('d_avatar')
		uni.removeStorageSync('d_usern')
	} catch (e) {
		// error
	}
	uni.redirectTo({
		url: '/pages/login/login'
	})
}
const tuic = () => {
	try {
		uni.removeStorageSync('d_token')
		uni.removeStorageSync('d_user')
		uni.removeStorageSync('d_avatar')
		uni.removeStorageSync('d_usern')
	} catch (e) {
		// error
	}
	newData()
}
const newData = () => {
	try {
		data.avatar=uni.getStorageSync("d_avatar"),
		data.user=uni.getStorageSync("d_user")
	} catch (e) {
		// error
	}

}
const gogunayv = () => {
	console.log(123);
	
}

const productOrder = (index:number) => {
	console.log(index);
	uni.navigateTo({
		url: `/pages/productOrder/productOrder?state=${index}`,
	})
}
</script>

<style scoped>
.my-header {
	/* background: url("~@/static/photo.jpg") no-repeat; */
	position: relative;
	width: 100%;
	height: 300rpx;
}

.header-main {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-config {
	position: absolute;
	left: 20rpx;
}

.header-logo {
	position: absolute;
	left: 50%;
	margin-left: -60rpx;
	width: 120rpx;


}

.config-img {
	width: 40rpx;
	height: 40rpx;
}

.logo-img {
	width: 120rpx;
	height: 120rpx;
	border: 2rpx solid #CCCCCC;
	border-radius: 50%;
	background-color: #FFFFFF;
}

.logo-name {
	font-weight: bold;
	color: #FFFFFF;
}

.order-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.order-list {
	padding: 20rpx;
	display: flex;
}

.order-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.order-img {
	width: 66rpx;
	height: 66rpx;
}

.my-content {
	margin: 20rpx 0;
	padding: 0 20rpx;
}

.my-content-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 2px solid #CCCCCC;
}</style>


